<template>
  <el-card class="user-info-card">
    <template #header>
      <div class="card-header">
        <h3>用户信息</h3>
      </div>
    </template>

    <!-- 基础信息部分 -->
    <div class="basic-info">
      <div class="user-profile">
        <div class="avatar-section">
          <el-avatar
              :size="80"
              :src="userInfo.avatar || defaultAvatar"
          />
          <div class="user-name">
            <h4>{{ userInfo.nickname || '-' }}</h4>
            <el-tag type="warning" size="small">{{ userInfo.userLevel || '普通用户' }}</el-tag>
          </div>
        </div>
      </div>

      <div class="info-details">
        <h4 class="section-title">基础信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">用户ID：</span>
            <span class="info-value">{{ userInfo.id || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">地区：</span>
            <span class="info-value">{{ userInfo.region || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">用户昵称：</span>
            <span class="info-value">{{ userInfo.nickname || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">行业：</span>
            <span class="info-value">{{ userInfo.industry || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">性别：</span>
            <span class="info-value">{{ userInfo.gender || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">体重：</span>
            <span class="info-value">{{ userInfo.weight ? userInfo.weight + ' 公斤' : '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">出生年月：</span>
            <span class="info-value">{{ formatDate(userInfo.birthDate) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">注册时间：</span>
            <span class="info-value">{{ formatDateTime(userInfo.createTime) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">手机号：</span>
            <span class="info-value">{{ userInfo.phone || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">用户来源：</span>
            <span class="info-value">{{ userInfo.source || '-' }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计信息部分（静态演示） -->
    <div class="stats-info">
      <h4 class="section-title">统计信息</h4>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">20</div>
          <div class="stat-label">挂号订单</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥3000.00</div>
          <div class="stat-label">体检订单</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">3000</div>
          <div class="stat-label">问诊订单</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">3000</div>
          <div class="stat-label">商城订单</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">3000</div>
          <div class="stat-label">关注用户数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">30</div>
          <div class="stat-label">商品评价</div>
        </div>
      </div>
    </div>
  </el-card>

  <el-card class="record-card">
    <h3>挂号记录</h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
      <el-table-column prop="registrationFee" label="挂号费用"></el-table-column>
      <el-table-column prop="hospital" label="医院"></el-table-column>
      <el-table-column prop="department" label="科室"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="viewDetails(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
    ></el-pagination>
  </el-card>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import axios from 'axios'

// 默认头像地址
const defaultAvatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'

// 用户信息对象
const userInfo = ref({})
const route = useRoute()

// 获取用户详情
const getPreUserInfo = () => {
  const id = route.query.id
  axios.post(`/user/getPreUserInfo/${id}`).then((resp) => {
    userInfo.value = resp.data
  })
}

// 日期格式化
const formatDate = (value) => {
  if (!value) return '-'
  return value.split(' ')[0]
}
const formatDateTime = (value) => {
  return value || '-'
}

// 挂号记录模拟数据与分页控制
const tableData = ref([
  {
    orderNumber: 'REG20240601001',
    registrationFee: '¥50',
    hospital: '北京协和医院',
    department: '内科',
    orderTime: '2025-06-01 10:30',
    orderStatus: '已完成'
  }
])
const total = ref(1)
const pageSize = ref(10)
const currentPage = ref(1)

const handlePageChange = (page) => {
  currentPage.value = page
  // TODO: 分页请求
}

const viewDetails = (row) => {
  console.log('查看详情：', row)
}

onMounted(() => {
  getPreUserInfo()
})
</script>

<style scoped>
/* 样式同之前 */
.user-info-card {
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.basic-info {
  display: flex;
  gap: 24px;
}

.user-profile {
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.user-name {
  text-align: center;
}

.user-name h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.info-details {
  flex: 1;
}

.section-title {
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #409eff;
  font-size: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  color: #666;
  width: 90px;
  margin-right: 8px;
  font-size: 14px;
}

.info-value {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  text-align: center;
}

.stat-item {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

@media (max-width: 768px) {
  .basic-info {
    flex-direction: column;
  }

  .user-profile {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
  }

  .avatar-section {
    flex-direction: row;
    padding: 0;
  }

  .user-name {
    text-align: left;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.record-card {
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
